/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */

import ProLayout, {
  MenuDataItem,
  BasicLayoutProps as ProLayoutProps,
  Settings,
  DefaultFooter,
} from '@ant-design/pro-layout';
import React, { useEffect } from 'react';
import Link from 'umi/link';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';

import Authorized from '@/utils/Authorized';
import RightContent from '@/components/GlobalHeader/RightContent';
import { ConnectState } from '@/models/connect';
// import { isAntDesignPro } from '@/utils/utils';
import logo from '../assets/logo.svg';
//import {Redirect} from 'umi';
import { User as CurrentUser } from '@/models/data';
import PageLoading from '@/components/PageLoading';

export interface BasicLayoutProps extends ProLayoutProps {
  breadcrumbNameMap: {
    [path: string]: MenuDataItem;
  };
  settings: Settings;
  dispatch: Dispatch;
  currentUser: CurrentUser;
  userMenuData: any[];
  loading: boolean;
}

export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
  breadcrumbNameMap: {
    [path: string]: MenuDataItem;
  };
};

/**
 * use Authorized check all menu item
 */
const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] => {
  // console.log('menuList');
  // console.log(menuList);
  return menuList.map(item => {
    const localItem = {
      ...item,
      children: item.children ? menuDataRender(item.children) : [],
    };
    // console.log(!!item.children);
    // console.log(item);
    return Authorized.check(item.authority, localItem, null) as MenuDataItem;
    // console.log('result');
    // console.log(result);
  });
};

// const footerRender: BasicLayoutProps['footerRender'] = (_, defaultDom) => {
//   if (!isAntDesignPro()) {
//     return defaultDom;
//   }
//   return (
//     <>
//       {defaultDom}
//       <div
//         style={{
//           padding: '0px 24px 24px',
//           textAlign: 'center',
//         }}
//       >
//         <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">
//           <img
//             src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"
//             width="82px"
//             alt="netlify logo"
//           />
//         </a>
//       </div>
//     </>
//   );
// };

const links = [
  {
    key: 'FullStack',
    title: 'MADAO',
    href: '',
    blankTarget: true,
  },
  {
    key: 'Document',
    title: '帮助文档',
    href: '',
    blankTarget: true,
  },
  {
    key: 'Github',
    title: '问题反馈',
    href: '',
    blankTarget: true,
  },
];

const copyright = '@2019';

const footerRenderCustom: BasicLayoutProps['footerRender'] = (_, defaultDom) => {
  return <DefaultFooter links={links} copyright={copyright} />;
};

const BasicLayout: React.FC<BasicLayoutProps> = props => {
  // const [menuData, setMenuData] = useState([]);

  const { dispatch, children, settings, userMenuData, loading } = props;
  /**
   * constructor
   */

  useEffect(() => {
    // let clear: boolean = false;
    if (dispatch) {
      dispatch({
        type: 'user/fetchCurrent',
      });
      dispatch({
        type: 'settings/getSetting',
      });
      dispatch({
        type: 'user/getMenuData', // 获取菜单
        callback: (res: any) => {
          // if (!clear) {
          //   setMenuData(res.data);
          // }
          // console.log('getMenuData');
        },
      });
    }
    // return function () {
    //   clear = true;
    // };
  }, []);

  // const menuDataAsync = (menuList: MenuDataItem[]): any[] => {
  //   return menuData;
  // };
  /**
   * init variables
   */
  const handleMenuCollapse = (payload: boolean): void => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      });
    }
  };
  // if (!currentUser.id) {
  //   // return <Redirect to="/user/login"></Redirect>;
  // }
  if (loading) {
    return <PageLoading />;
  }

  return (
    <ProLayout
      logo={logo}
      onCollapse={handleMenuCollapse} // 点击收缩菜单
      // menuDataRender={menuDataRender}
      // menuDataRender={menuDataAsync}
      menuDataRender={() => userMenuData}
      menuItemRender={(menuItemProps, defaultDom) => {
        //去掉菜单点不动
        if (menuItemProps.isUrl) {
          return defaultDom;
        }
        // console.log(defaultDom);
        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      breadcrumbRender={(routers = []) => {
        return [
          //面包屑导航
          {
            path: '/',
            breadcrumbName: formatMessage({
              id: 'menu.home',
              defaultMessage: 'Home',
            }),
            // breadcrumbName: ''
          },
          ...routers,
        ];
      }}
      itemRender={(route, params, routes, paths) => {
        // const first = routes.indexOf(route) === 0;
        // return first ? (
        //   <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        // ) : (
        //   <span>{route.breadcrumbName}</span>
        // );
        return <span>{route.breadcrumbName}</span>;
      }}
      footerRender={footerRenderCustom}
      formatMessage={formatMessage}
      rightContentRender={rightProps => <RightContent {...rightProps} />} //右上角的导航
      {...props} //去掉菜单没了
      {...settings}
    >
      {children}
    </ProLayout>
  );
};

export default connect(({ global, settings, user, loading }: ConnectState) => ({
  collapsed: global.collapsed,
  settings,
  currentUser: user.currentUser,
  userMenuData: user.menuData,
  loading: loading.models.user,
}))(BasicLayout);
